<template>
  <el-container style="min-height: 100vh">
    <!-- 左侧 -->
    <left-component></left-component>
    <el-container style="flex-direction: column;">
      <!-- 头部 -->
      <header-component></header-component>
      <el-main>
        <!--下面这个div盒子是搜索框和搜索按钮 -->
        <!-- <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-button class="ml-5" type="primary">搜索</el-button>
        </div> -->

        <!--  下面这个div盒子是新增、批量删除、导入导出按钮的  -->
        <div class="pageTitleWrap">
          <div class="pageTitle">查看任务数据</div>
          <el-button type="primary" @click="dialogFormVisible = true" style="opacity: 0;"></el-button>
        </div>

        <el-table :data="tableData" border stripe: header-cell-class-name="headerBg">
          <el-table-column prop="date" label="职位名称" width="240" align="center"></el-table-column>
          <el-table-column prop="name" label="职位链接" width="240" align="center"></el-table-column>
          <el-table-column prop="name" label="公司名称" width="240" align="center"></el-table-column>
          <el-table-column prop="name" label="举报账号" width="240" align="center"></el-table-column>
          <el-table-column prop="name" label="状态" width="240" align="center"></el-table-column>
          <!-- 表格里面添加编辑和删除的按钮  -->
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-button type="success">重新举报</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--下边这个div盒子是添加进来可以分页的代码 -->
        <div style="padding: 10px 0">
          <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="10">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
import HeaderComponent from '@/components/header.vue'
import LeftComponent from '@/components/left.vue'

export default {
  name: 'userList',
  components: {
    'header-component': HeaderComponent,
    'left-component': LeftComponent
  },
  data() {
    const item = {
      date: '1',
      name: '正常待授权',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(5).fill(item),
      collapseBtnClass: 'el-icon-s-fold',
      sideWidth: 200, //动态收缩导航栏初始值200
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  methods: {

  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}

.el-menu-item-group__title {
  padding: 0 0 0 0;
}
</style>